<template>
	<view class="replay-container">
		<!-- 视频播放区域 -->
		<view class="video-section">
			<!-- 顶部直播信息栏 -->
			<view class="live-header">
				<image class="live-avatar" :src="anchorAvatar" mode="aspectFill" @error="handleAvatarError"></image>
				<view class="live-info">
					<text class="live-name">{{anchorName}}的直播间{{isFollowing ? '（已关注）' : ''}}</text>
				</view>
				<!-- 关注按钮 -->
				<view class="follow-btn" :class="{'followed': isFollowing}" @tap="toggleFollow">
					<uni-icons v-if="!isFollowing" type="plus-filled" size="20" color="#fff"></uni-icons>
					<text>{{isFollowing ? '已关注' : '关注'}}</text>
				</view>
			</view>

			<video id="replayVideo" class="video-player" src="/static/1.mp4" controls></video>

			<!-- 视频信息区域 -->
			<view class="video-info">
				<view class="video-title">{{videoTitle}}</view>

				<!-- 新增选项卡 -->
				<view class="tab-bar">
					<view class="tab-item" :class="{'active': activeTab === 'interaction'}"
						@tap="switchTab('interaction')">
						<text>互动</text>
					</view>
					<view class="tab-divider"></view>
					<view class="tab-item" :class="{'active': activeTab === 'intro'}" @tap="switchTab('intro')">
						<text>介绍</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 介绍内容 -->
			<view class="intro-content" v-if="activeTab === 'intro'">
				<view class="intro-center-container">
					<text class="course-title">课程标题</text>
					<text class="course-time">2024-12-11 20:00:00 开始</text>
					<text
						class="course-desc">互联网健康直播，让权威医生来到你身边！实时获取专业科普、疾病预防和保健知识，在线答疑解惑。足不出户，轻松学习，便捷互动。是您获取可靠健康信息、进行初步咨询的智能新选择！随时随地，问你想问，守护健康更简单。</text>
				</view>
			</view>

			<!-- 互动内容 -->
			<scroll-view class="interaction-content" scroll-y v-if="activeTab === 'interaction'" :scroll-top="scrollTop"
				scroll-with-animation>
				<view class="interaction-center-container">
					<view class="interaction-list">
						<view class="interaction-item" v-for="(item, index) in interactions" :key="index">
							<view class="user-avatar-container">
								<image class="user-avatar" :src="item.avatar" mode="aspectFill"
									@error="handleImageError(index)" />
								<view v-if="item.isLive" class="live-badge">
									<image src="/static/Frame 3.png" mode="aspectFit" />
								</view>
							</view>
							<view class="interaction-content-container">
								<view class="interaction-header">
									<text class="username">{{item.user}}</text>
									<text class="time">{{formatTime(item.time)}}</text>
								</view>
								<view class="interaction-content">{{item.content}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<input class="comment-input" placeholder="说点什么..." v-model="inputMessage" @confirm="sendMessage"
				confirm-type="send" />
			<view class="action-buttons">
				<view class="action-button" @tap="shareVideo">
					<text>分享</text>
				</view>
				<view class="action-button">
					<text>更多</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				anchorName: '明明',
				anchorAvatar: '/static/logo.png', // 修改为更常见的png格式
				videoTitle: '直播间标题文章同日不共苦，"消失的地球，是我们的未来需要关注的问题"',
				isLiked: false,
				likeCount: 326,
				isFollowing: false,
				activeTab: 'interaction',
				inputMessage: '',
				scrollTop: 0,
				interactions: [{
						user: "和你隔一片海洋",
						content: "劳动是春天的甘泉；劳动是夏天的清风；劳动是秋天的果实；劳动是冬天的阳光。",
						time: "2025-07-23 10:06:15",
						avatar: "/static/avatar3.png", // 修改为png格式
						isLive: true
					},
					{
						user: "新万事安好",
						content: "还是让人能看出每个人对待困难与出力就开始焦虑，除了我们这些中年老人",
						time: "2025-07-11 10:21:00",
						avatar: "/static/avatar4.png",
						isLive: false
					},
					{
						user: "亚龙",
						content: "在夏夜子的地方，别让你不小心就被扎上一下，要小心地伸手去才能拔除了。",
						time: "2025-07-23 10:08:45",
						avatar: "/static/avatar5.png",
						isLive: true
					},
					{
						user: "落落",
						content: "他们处处表现得比别人聪明，他们觉得比做得多，站着看着比干得多，他们年轻。",
						time: "2025-07-23 10:10:05",
						avatar: "/static/avatar7.png",
						isLive: false
					}
				],
				myInfo: {
					user: "我",
					avatar: "/static/my-avatar.png" // 修改为png格式
				}
			}
		},
		onLoad(options) {
			if (options.anchorName) {
				this.anchorName = decodeURIComponent(options.anchorName);
			}
			if (options.anchorAvatar) {
				this.anchorAvatar = decodeURIComponent(options.anchorAvatar);
			}
			if (options.videoTitle) {
				this.videoTitle = decodeURIComponent(options.videoTitle);
			}

			uni.setNavigationBarTitle({
				title: this.videoTitle
			});
		},
		methods: {
			// 头像加载失败处理
			handleAvatarError() {
				this.anchorAvatar = '/static/default-avatar.png';
			},

			// 互动头像加载失败处理
			handleImageError(index) {
				this.$set(this.interactions, index, {
					...this.interactions[index],
					avatar: '/static/default-avatar.png'
				});
			},

			formatTime(timeStr) {
				return timeStr.split(' ')[1].substr(0, 5);
			},
			likeVideo() {
				this.isLiked = !this.isLiked;
				if (this.isLiked) {
					this.likeCount++;
				} else {
					this.likeCount--;
				}
			},
			shareVideo() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					title: `${this.anchorName}的直播回放: ${this.videoTitle}`,
					summary: "我正在观看这个直播回放，一起来看吧！",
					success: () => {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						});
					}
				});
			},
			toggleFollow() {
				this.isFollowing = !this.isFollowing;
				uni.showToast({
					title: this.isFollowing ? '关注成功' : '已取消关注',
					icon: 'none'
				});
			},
			switchTab(tabName) {
				this.activeTab = tabName;
			},
			sendMessage() {
				if (this.inputMessage.trim() === '') return;

				const now = new Date();
				const timeStr = now.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit',
					hour12: false
				}).replace(/\//g, '-');

				this.interactions.push({
					user: this.myInfo.user,
					content: this.inputMessage,
					time: timeStr,
					avatar: this.myInfo.avatar,
					isLive: false
				});

				this.inputMessage = '';
				this.$nextTick(() => {
					this.scrollTop = 99999;
				});
			},
			getCurrentTime() {
				const now = new Date();
				return now.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit',
					hour12: false
				}).replace(/\//g, '-');
			}
		}
	}
</script>

<style scoped>
	.replay-container {
		display: flex;
		flex-direction: column;
		height: 93vh;
		background-color: #f5f5f5;
	}

	.video-section {
		position: relative;
		background-color: #000;
	}

	.live-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
		z-index: 10;
	}

	.live-avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		margin-right: 15rpx;
		background-color: #eee;
		/* 添加背景色 */
	}

	.live-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.live-name {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 5rpx;
	}

	.follow-btn {
		padding: 8rpx 20rpx;
		background-color: #1E90FF;
		border-radius: 30rpx;
		color: white;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		white-space: nowrap;
	}

	.follow-btn.followed {
		background-color: white;
		color: #666;
		border: 1rpx solid #ddd;
	}

	.video-player {
		width: 100%;
		height: 420rpx;
	}

	.video-info {
		padding: 20rpx;
		background-color: #fff;
	}

	.video-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}

	.tab-bar {
		display: flex;
		border-radius: 8rpx;
		background-color: #f8f8f8;
		height: 70rpx;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;
	}

	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28rpx;
		color: #999;
	}

	.tab-item.active {
		color: #1E90FF;
		font-weight: bold;
		background-color: #fff;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.tab-divider {
		width: 1rpx;
		height: 30rpx;
		background-color: #ddd;
	}

	.content-area {
		flex: 1;
		overflow: hidden;
		background-color: #fff;
	}

	.intro-content {
		height: 100%;
		display: flex;
		justify-content: center;
		padding: 10rpx;
	}

	.intro-center-container {
		width: 90%;
		max-width: 700rpx;
		display: flex;
		flex-direction: column;
	}

	.course-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.course-time {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.course-desc {
		font-size: 28rpx;
		line-height: 1.6;
		color: #333;
		text-align: center;
	}

	.interaction-content {
		height: 100%;
		width: 100%;
	}

	.interaction-center-container {
		width: 90%;
		max-width: 600rpx;
		margin: 0 auto;
		padding: 20rpx 0;
	}

	.interaction-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.user-avatar-container {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.user-avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #f0f0f0;
		/* 默认背景色 */
	}

	.live-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #ff4d4f;
		border: 2rpx solid white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.live-badge image {
		width: 16rpx;
		height: 16rpx;
	}

	.interaction-content-container {
		flex: 1;
	}

	.interaction-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.username {
		font-weight: bold;
		color: #333;
		font-size: 28rpx;
	}

	.time {
		color: #999;
		font-size: 24rpx;
	}

	.interaction-content {
		color: #666;
		line-height: 1.6;
		font-size: 26rpx;
	}

	.bottom-bar {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		align-items: center;
	}

	.comment-input {
		flex: 1;
		background-color: #f5f5f5;
		padding: 15rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
	}

	.action-buttons {
		display: flex;
	}

	.action-button {
		margin-left: 30rpx;
		color: #1E90FF;
		font-size: 28rpx;
	}
</style>